<template>
  <div style=" display: flex; justify-content: center; align-items: center;">
    <div v-if="isLogin">
      <el-dropdown :hide-on-click="true" class="user-info" trigger="click">
        <div style="justify-content: center; align-items: center;">
          <!-- <span class="el-dropdown-link"> -->
            <el-avatar :src="loginUser.avatar" />
            <span class="username">{{ loginUser.nickname }}</span>
            <!-- <el-icon><ArrowDown /></el-icon> -->
          <!-- </span> -->
        </div>
        <template #dropdown>
          <el-dropdown-menu style="width: 296px">
            <el-dropdown-item @click="showConfig">
              <el-icon>
                <Tools />
              </el-icon>
              <span>账户信息</span>
            </el-dropdown-item>

            <el-dropdown-item @click="clearAllChats">
              <el-icon>
                <Delete />
              </el-icon>
              <span>清除所有会话</span>
            </el-dropdown-item>

            <el-dropdown-item @click="logout">
              <i class="iconfont icon-logout"></i>
              <span>注销</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div v-else @click="login">
      <el-avatar> 未登录 </el-avatar>
    </div>

    <login-dialog :show="showLoginDialog" @hide="close" />

    <config-dialog
      v-if="isLogin"
      :show="showConfigDialog"
      :models="models"
      @hide="showConfigDialog = false"
    />
  </div>
</template>
 
<script setup>
import { onMounted, ref } from "vue";
import LoginDialog from "@/components/LoginDialog.vue";
import ConfigDialog from "@/components/ConfigDialog.vue";
import { checkSession } from "@/action/session";
import { removeUserToken } from "@/store/session";
import { ElMessage, ElMessageBox } from "element-plus";
import { httpGet, httpPost } from "@/utils/http";
import { getCurrentInstance } from 'vue';
import {
  ArrowDown,
  Check,
  Close,
  Delete,
  Edit,
  Plus,
  Promotion,
  RefreshRight,
  Search,
  Tools,
  VideoPause,
} from "@element-plus/icons-vue";

const isLogin = ref(false);
const loginUser = ref({});
const showLoginDialog = ref(false);
const showConfigDialog = ref(false);
const models = ref([]);
const instance = getCurrentInstance();

const props = defineProps({
  isLogin: {
    type: Boolean,
    required: true,
  },
  loginUser: {
    type: Map,
  },
});

const login = () => {
  showLoginDialog.value = true;
};

onMounted(() => {
  checkSession().then((user) => {
    loginUser.value = user;
    isLogin.value = true;
  });
});

const showConfig = function () {
  console.log(" show config ");
  showConfigDialog.value = true;
};

const clearAllChats = function () {
  ElMessageBox.confirm(
    "确认要清空所有的会话记录吗?<br/>此操作不可以撤销！",
    "操作提示：",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
      dangerouslyUseHTMLString: true,
      showClose: true,
      closeOnClickModal: false,
      center: true,
    }
  )
    .then(() => {
      httpGet("/api/chat/clear")
        .then(() => {
          ElMessage.success("操作成功！");
        })
        .catch((e) => {
          ElMessage.error("操作失败：" + e.message);
        });
    })
    .catch(() => {});
};

const logout = function () {
  httpGet("/api/user/logout")
    .then(() => {
      removeUserToken();
      isLogin.value = false;
      loginUser.value = {};
      window.location.reload()
    })
    .catch(() => {
      ElMessage.error("注销失败！");
    });
};

const close = (message) => {
  if (message) {
    // 用户登录成功,获取用户信息
    checkSession().then((user) => {
      loginUser.value = user;
      isLogin.value = true;
      window.location.reload()
    });
  }
  showLoginDialog.value = false;
};
</script>

<style lang="stylus">
.login-dialog {
  border-radius: 20px;

  .label {
    padding-top: 3px;

    .el-icon {
      position: relative;
      font-size: 20px;
      margin-right: 6px;
      top: 4px;
    }

    span {
      font-size: 16px;
    }
  }

  .login-btn {
    text-align: center;
    padding-top: 10px;

    .el-button {
      width: 50%;
    }
  }
}
</style>